<template>
    <div class="container">
        <div class="header">
            <van-icon @click="goBack" name="arrow-left" class="header-left" size="30" />
            填写服务订单
        </div>
        <status-bar item="0" />
        <van-cell class="cell">
            <template #title>
                <van-image :src="createInfo.service.serviceImg" width="25" height="25" />
                <span class="server-name">{{ createInfo.service.serviceName }}</span>
            </template>
            <template #default>
                <div class="service-text">服务内容</div>
            </template>
        </van-cell>
        <van-cell-group class="service-text">
            <van-cell class="cell">
                <template #title>就诊医院</template>
                <template #default>
                    <div  @click="showHospital=true">
                        {{ form.hospital_name || "请选择就诊医院" }}
                        <van-icon name="arrow" />
                    </div>
                </template>
            </van-cell>
             <van-cell class="cell">
                <template #title>就诊时间</template>
                <template #default>
                    <div  @click="showStartTime=true">
                        {{ currentDate || "请选择就诊时间" }}
                        <van-icon name="arrow" />
                    </div>
                </template>
            </van-cell>
             <van-cell class="cell">
                <template #title>陪诊师</template>
                <template #default>
                    <div  @click="showCompanion=true">
                        {{ companionName || "请选择陪诊师" }}
                        <van-icon name="arrow" />
                    </div>
                </template>
            </van-cell>
            <van-cell class="cell">
                <template #title>接送地址</template>
                <template #default>
                     <van-field 
                     class="text"
                     input-align="right"
                            v-model="form.receiveAddress"
                            placeholder="请填写接送地址"/>
                </template>
            </van-cell>
            <van-cell class="cell">
                <template #title>联系电话</template>
                <template #default>
                     <van-field 
                     class="text"
                     input-align="right"
                            v-model="form.tel"
                            placeholder="请填写联系电话"/>
                </template>
            </van-cell>
        </van-cell-group>
        <van-cell-group title="服务需求" class="cell">
            <van-cell class="cell">
                 <van-field 
                     class="text"
                     style="height: 100px;"
                            v-model="form.demand"
                            placeholder="请简单描述您要就诊的科室.."/>
            </van-cell>
        </van-cell-group>
         <van-button @click="sumbit" class="sumbit" type="primary" size="large">提交订单</van-button>
        <!-- 底部弹出 -->
            <van-popup
            v-model:show="showHospital"
            position="bottom"
            :style="{ height: '30%' }"
            >
            <van-picker
                :columns="showHospColumns"
                @confirm="showHospConfirm"
                @cancel="showHospital=false"
                />
        </van-popup>
         <van-popup
            v-model:show="showStartTime"
            position="bottom"
            :style="{ height: '30%' }"
            >
            <van-date-picker
                title="选择日期"
                :min-date="minDate"
                @confirm="showTimeConfirm"
                @cancel="showStartTime=false"
                />
        </van-popup>
         <van-popup
            v-model:show="showCompanion"
            position="bottom"
            :style="{ height: '30%' }"
            >
            <van-picker
                :columns="showCompanionColumns"
                @confirm="showCompanionConfirm"
                @cancel="showCompanion=false"
                />
        </van-popup>
        <!-- 支付二维码 -->
       <van-dialog :show-confirm-button="false" v-model:show="show">
        <div>微信支付</div>
        <van-icon name="cross" class="close" @click="closeCode"/>
       <van-image width="150" height="150" :src="codeImg" />
       <div>请使用本人微信扫描二维码</div>
        </van-dialog>
    </div>
</template>
<script setup>
import { useRouter } from 'vue-router';
import StatusBar from '../../components/statusBar.vue';
import { onMounted, getCurrentInstance, reactive ,ref,computed} from 'vue';
import { showNotify } from 'vant';
import QRCode from 'qrcode'
const router = useRouter()
const { proxy } = getCurrentInstance()
const createInfo = reactive({
    companion: [],
    hospitals: [],
    // 对象
    service: {}
})

onMounted(async () => {
    const { data } = await proxy.$api.companion()
    Object.assign(createInfo, data.data)

})
//  点击返回
const goBack = () => {
    // 返回上一页
    router.go(-1)
}
// form数据
const form=reactive({})
// 就诊医院
const showHospital=ref(false)

const showHospColumns=computed(()=>{
    return createInfo.hospitals.map(item=>{
        return {  text:item.name,value:item.id }
    })
})

// 选择医院
const showHospConfirm=(item)=>{
      form.hospital_id=item.selectedOptions[0].value
      form.hospital_name=item.selectedOptions[0].text
    //   关闭弹出层
      showHospital.value=false
}
// 选择时间
const showStartTime=ref(false)
const currentDate=ref()
// 最小日期（不超过当前）
const minDate=ref(new Date())
// 时间提交
const showTimeConfirm=(item)=>{
   const dateStr= item.selectedValues.join('-')
      currentDate.value=dateStr
      form.starttime=new Date(dateStr).getTime()
      showStartTime.value=false
}

// 选择陪诊师
// 页面名称的显示
const companionName=ref()
const showCompanion=ref(false)
const showCompanionConfirm=(item)=>{
     form.companion_id=item.selectedOptions[0].value
     companionName.value=item.selectedOptions[0].text
     showCompanion.value=false
}
const showCompanionColumns=computed(()=>{
    return createInfo.companion.map(item=>{
        return {  text:item.name,value:item.id }
    })
})
// 支付弹窗
const show=ref(false)
const codeImg=ref()
const closeCode=()=>{
    show.value=false
    router.push('/order')
}

// 提交表单
const sumbit=async()=>{
    const params=[
         'hospital_id',
        'hospital_name',
        'demand',
        'companion_id',
        'receiveAddress',
        'tel',
        'starttime'
    ]
    for(const i of params){
        if(!form[i]){
            showNotify({ message: '请填写完整信息'})
            return
        }
    }
  const { data:orderRes }= await proxy.$api.createOrder(form)
  QRCode.toDataURL(orderRes.data.wx_code).then((url)=>{
    show.value=true
    codeImg.value=url
  })

}
</script>
<style scoped lang="less">
.container {
    background-color: #f0f0f0;
    height: 100vh;
}

.header {
    padding: 10px 0;
    text-align: center;
    line-height: 30px;
    font-size: 15px;

    .header-left {
        float: left;
    }
}

.cell {
    width: 95%;
    margin: 5px auto;
    background-color: #fff;

    ::v-deep(.van-field__control) {
        color: var(--van-cell-value-color);
    }

    ::v-deep(.van-cell__title) {
        display: flex;
        align-items: center;
    }

    .server-name {
        margin-left: 10px;
    }
}

.service-text {
    background: url() no-repeat center center;
    background-size: 20px;
}

.sumbit {
    position: absolute;
    bottom: 0;
}

::v-deep(.van-dialog__content) {
    text-align: center;
    padding: 20px;

    .close {
        position: absolute;
        left: 20px;
    }
}
</style>
